<template>
  <div class="rule-config-detail">
    <!-- 面包屑导航 -->
    <a-breadcrumb class="breadcrumb">
      <a-breadcrumb-item>
        <a @click="goToRuleList" style="cursor: pointer;">告警规则配置</a>
      </a-breadcrumb-item>
      <a-breadcrumb-item>{{ getBreadcrumbTitle() }}</a-breadcrumb-item>
    </a-breadcrumb>

    <!-- 步骤条 -->
    <div class="steps-wrapper">
      <div class="step-item" :class="{ active: currentStep >= 0, completed: currentStep > 0 }">
        <div class="step-number">1</div>
        <div class="step-title">第一步：基础规则数据配置</div>
        <div class="step-arrow" v-if="currentStep >= 0"></div>
      </div>
      <div class="step-item" :class="{ active: currentStep >= 1, completed: currentStep > 1 }">
        <div class="step-number">2</div>
        <div class="step-title">第二步：自定义条件配置</div>
        <div class="step-arrow" v-if="currentStep >= 1"></div>
      </div>
      <div class="step-item" :class="{ active: currentStep >= 2, completed: currentStep > 2 }">
        <div class="step-number">3</div>
        <div class="step-title">第三步：通知方式配置</div>
      </div>
    </div>

    <div class="step-content">
      <!-- 第一步：基础规则数据配置 -->
      <div v-show="currentStep === 0" class="step-form">
        <a-form :form="form" layout="inline" class="compact-form" :label-col="{ span: 5 }" :wrapper-col="{ span: 8 }">
          <a-form-item label="告警规则标识" required class="full-width-item">
            <a-input v-decorator="[
              'ruleCode',
              { rules: [{ required: true, message: '请输入告警规则标识' }] }
            ]" placeholder="请输入告警规则标识" :disabled="isReadonly || isEditMode" />
          </a-form-item>
          <a-form-item label="告警规则名称" required class="full-width-item">
            <a-input v-decorator="[
              'ruleName',
              { rules: [{ required: true, message: '请输入告警规则名称' }] }
            ]" placeholder="请输入告警规则名称" :disabled="isReadonly" />
          </a-form-item>
          <a-form-item label="关联决策流" required class="full-width-item">
            <a-select v-decorator="[
              'workflowCode',
              { rules: [{ required: true, message: '请选择关联决策流' }] }
            ]" placeholder="请选择关联决策流" :disabled="isReadonly || isEditMode" showSearch>
              <a-select-option v-for="item in workflowList" :key="item.workflowCode" :value="item.workflowCode">
                {{ item.workflowName }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="节点类型" class="full-width-item">
            <a-select v-decorator="[
              'nodeType'
            ]" placeholder="请选择节点类型" @change="handleNodeTypeChange" :disabled="isReadonly || isEditMode" showSearch>
              <a-select-option v-for="item in nodeTypeList" :key="item.nodeType" :value="item.nodeType">
                {{ item.nodeName }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="关联节点" class="full-width-item">
            <a-select v-decorator="[
              'nodeId'
            ]" placeholder="请选择关联节点" :disabled="isReadonly || isEditMode" showSearch>
              <a-select-option v-for="item in nodeList" :key="item.nodeId" :value="item.nodeId">
                {{ item.nodeName }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
        <div class="step-actions">
          <a-button type="primary" size="large" @click="nextStep" class="next-btn">下一步</a-button>
        </div>
      </div>

      <!-- 第二步：自定义条件配置 -->
      <div v-show="currentStep === 1" class="step-form">
        <a-form :form="form" layout="inline" class="compact-form" :label-col="{ span: 5 }" :wrapper-col="{ span: 8 }">
          <div class="time-condition-inline">
            <a-form-item label="时间条件" class="time-range-item">
              <div class="time-range-wrapper">
                <a-select v-decorator="['effectTimeStart']" placeholder="开始时间" class="time-select"
                  :disabled="isReadonly || isEditMode">
                  <a-select-option v-for="i in 25" :key="i - 1" :value="String(i - 1)">
                    {{ i - 1 }}点
                  </a-select-option>
                </a-select>
                <span class="time-separator-inline">至</span>
                <a-select v-decorator="['effectTimeEnd']" placeholder="结束时间" class="time-select"
                  :disabled="isReadonly || isEditMode">
                  <a-select-option v-for="i in 25" :key="i - 1" :value="String(i - 1)">
                    {{ i - 1 }}点
                  </a-select-option>
                </a-select>
              </div>
            </a-form-item>
          </div>

          <a-form-item label="规则周期环境" required class="full-width-item">
            <a-select v-decorator="[
              'ruleCycle',
              { rules: [{ required: true, message: '请选择规则周期环境' }] }
            ]" placeholder="请选择规则周期环境" :disabled="isReadonly" showSearch>
              <a-select-option v-for="item in ruleCycleOptions" :key="item.value" :value="item.value">
                {{ item.key }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="自定义组合" class="full-width-item">
            <a-radio-group v-decorator="['logicOperator', { initialValue: 'OR' }]" :disabled="isReadonly || isEditMode">
              <a-radio value="OR">满足以下任意条件</a-radio>
              <a-radio value="AND">满足以下全部条件</a-radio>
            </a-radio-group>
          </a-form-item>

          <!-- 预警指标配置 -->
          <div class="warning-indicators">
            <div class="indicators-header">
              <h4>预警指标配置</h4>
            </div>
            <a-table :columns="indicatorColumns" :data-source="warningIndicators" :pagination="false" size="small"
              class="indicators-table">
              <template slot="indexName" slot-scope="text, record, index">
                <span>预警指标{{ index + 1 }}：{{ text }}</span>
              </template>
              <template slot="operator" slot-scope="text, record">
                <a-select v-model="record.operator" placeholder="操作符" size="small" style="width: 100%"
                  :disabled="isReadonly || isEditMode">
                  <a-select-option v-for="option in operatorOptions" :key="option.value" :value="option.value">
                    {{ option.label }}
                  </a-select-option>
                </a-select>
              </template>
              <template slot="threshold" slot-scope="text, record">
                <a-input v-model="record.threshold" placeholder="输入值" size="small"
                  :disabled="isReadonly || isEditMode" />
              </template>
              <template slot="choose" slot-scope="text, record">
                <a-switch v-model="record.choose" size="small" :disabled="isReadonly || isEditMode" />
              </template>
            </a-table>
          </div>
        </a-form>
        <div class="step-actions">
          <a-button size="large" @click="prevStep" class="prev-btn">上一步</a-button>
          <a-button type="primary" size="large" @click="nextStep" class="next-btn">下一步</a-button>
        </div>
      </div>

      <!-- 第三步：通知方式配置 -->
      <div v-show="currentStep === 2" class="step-form">
        <div class="notification-config">
          <div class="config-header">
            <h4>通知配置</h4>
            <a-button type="primary" @click="addNotificationConfig" class="add-config-btn" :disabled="isReadonly">
              <a-icon type="plus" /> 添加配置项
            </a-button>
          </div>

          <div v-if="notificationConfigs.length === 0" class="empty-config">
            <a-empty description="暂无配置项，请点击上方按钮添加" />
          </div>

          <div v-for="(config, index) in notificationConfigs" :key="index" class="config-item">
            <div class="config-item-header">
              <span class="config-title">配置项 {{ index + 1 }}</span>
              <a-button type="link" @click="removeNotificationConfig(index)" class="remove-btn" :disabled="isReadonly">
                <a-icon type="delete" /> 删除
              </a-button>
            </div>

            <div class="config-content">
              <div class="config-row">
                <label class="config-label">通知方式：</label>
                <a-checkbox-group v-model="config.notificationTypes" class="notification-types" :disabled="isReadonly">
                  <a-checkbox v-for="method in notificationMethods" :key="method.value" :value="method.value">
                    {{ method.key }}
                  </a-checkbox>
                </a-checkbox-group>
              </div>

              <div class="config-row">
                <label class="config-label">通知对象：</label>
                <a-select v-model="config.notificationTargets" mode="multiple" placeholder="请选择通知对象"
                  class="notification-targets" :options="notificationTargetOptions" :disabled="isReadonly" showSearch>
                </a-select>
              </div>
            </div>
          </div>
        </div>

        <div class="step-actions">
          <a-button size="large" @click="prevStep" class="prev-btn">上一步</a-button>
          <a-button v-if="!isReadonly" type="primary" size="large" @click="submitForm" class="submit-btn">{{ pageType
            === '2'
            ? '保存' : '提交' }}</a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { alarmRuleAdd, alarmRuleUpdate, alarmRuleGet, relationWorkflow, relationNodeConfig, alarmRuleCondition, alarmNoticeConfigList } from '@/api/ruleConfig'

export default {
  name: 'RuleConfigDetail',
  data() {
    return {
      currentStep: 0,
      form: this.$form.createForm(this),
      pageType: '', // 页面类型：1-新增，2-编辑，3-查看，1且有id-复制
      ruleId: '', // 规则ID
      isReadonly: false, // 是否只读模式
      isEditMode: false, // 是否编辑模式
      workflowList: [],
      nodeTypeList: [], // 节点类型列表
      nodeList: [], // 关联节点列表
      ruleCycleOptions: [], // 规则循环周期选项
      operatorOptions: [
        { value: '>', label: '大于' },
        { value: '<', label: '小于' },
        { value: '>=', label: '大于等于' },
        { value: '<=', label: '小于等于' },
        { value: '=', label: '等于' }
      ],
      warningIndicators: [],
      indicatorColumns: [
        {
          title: '预警指标',
          dataIndex: 'indexName',
          key: 'indexName',
          width: '40%',
          scopedSlots: { customRender: 'indexName' }
        },
        {
          title: '操作符',
          dataIndex: 'operator',
          key: 'operator',
          width: '20%',
          scopedSlots: { customRender: 'operator' }
        },
        {
          title: '阈值',
          dataIndex: 'threshold',
          key: 'threshold',
          width: '25%',
          scopedSlots: { customRender: 'threshold' }
        },
        {
          title: '启用',
          dataIndex: 'choose',
          key: 'choose',
          width: '15%',
          align: 'center',
          scopedSlots: { customRender: 'choose' }
        }
      ],
      notificationConfigs: [],
      notificationMethods: [], // 通知方式选项
      notificationTargetOptions: []
    }
  },
  async mounted() {
    this.initPageParams()
    // 先加载基础数据
    await Promise.all([
      this.fetchWorkflowList(),
      this.fetchNodeTypeList(),
      this.fetchRuleConditionData(),
      this.fetchNotificationTargets()
    ])

    // 基础数据加载完成后，如果有ID则获取规则数据进行回显
    if (this.ruleId) {
      this.fetchRuleData()
    }
  },
  methods: {
    // 初始化页面参数
    initPageParams() {
      const { type, id } = this.$route.query
      this.pageType = type
      this.ruleId = id

      // 设置只读模式
      this.isReadonly = type === '3'
      // 设置编辑模式下的部分字段禁用
      this.isEditMode = type === '2' && id
    },

    // 获取规则数据进行回显
    async fetchRuleData() {
      try {
        const response = await alarmRuleGet({ id: this.ruleId })
        if (response.statusCode === 200 && response.data) {
          this.fillFormData(response.data)
        }
      } catch (error) {
        console.error('获取规则数据失败:', error)
        this.$message.error('获取规则数据失败')
      }
    },

    // 填充表单数据
    fillFormData(data) {
      // 第一步数据回填
      this.form.setFieldsValue({
        ruleCode: data.ruleCode,
        ruleName: data.ruleName,
        workflowCode: data.workflowCode,
        nodeType: data.nodeType
      })

      // 如果是节点类型有值，需要先加载对应的节点列表，再设置nodeId
      if (data.nodeType) {
        this.handleNodeTypeChange(data.nodeType)
        // 使用nextTick确保节点列表加载完成后再设置nodeId
        this.$nextTick(() => {
          this.form.setFieldsValue({
            nodeId: data.nodeId
          })
        })
      }

      // 第二步数据回填
      this.form.setFieldsValue({
        effectTimeStart: String(data.effectStartHour || 0),
        effectTimeEnd: String(data.effectEndHour || 24),
        ruleCycle: data.ruleCycle,
        logicOperator: data.logicOperator || 'AND'
      })

      // 预警指标数据回填
      if (data.quoteIndices && data.quoteIndices.length > 0) {
        this.warningIndicators = this.warningIndicators.map(indicator => {
          const quoteIndex = data.quoteIndices.find(item => item.indexCode === indicator.indexCode)
          if (quoteIndex) {
            return {
              ...indicator,
              operator: quoteIndex.operator,
              threshold: String(quoteIndex.threshold),
              choose: true
            }
          }
          return indicator
        })
      }

      // 通知配置数据回填
      if (data.noticeUsers && data.noticeUsers.length > 0) {
        this.notificationConfigs = data.noticeUsers.map(notice => {
          // 将type值转换为通知方式数组
          const notificationTypes = []
          this.notificationMethods.forEach(method => {
            if (notice.type & method.value) {
              notificationTypes.push(method.value)
            }
          })

          // 提取通知对象
          const notificationTargets = notice.users
            .filter(user => user.noticeCode)
            .map(user => user.noticeCode)

          return {
            notificationTypes,
            notificationTargets
          }
        })
      }
    },

    // 获取决策流列表
    async fetchWorkflowList() {
      try {
        const response = await relationWorkflow()
        this.workflowList = response.data || []
      } catch (error) {
        console.error('获取决策流列表失败:', error)
      }
    },
    // 获取节点类型列表
    async fetchNodeTypeList() {
      try {
        const response = await relationNodeConfig()
        this.nodeTypeList = response.data || []
      } catch (error) {
        console.error('获取节点类型列表失败:', error)
      }
    },
    // 获取规则条件数据
    async fetchRuleConditionData() {
      try {
        const response = await alarmRuleCondition()
        if (response.data) {
          // 设置规则循环周期选项
          this.ruleCycleOptions = response.data.ruleCycles || []

          // 设置预警指标数据
          this.warningIndicators = (response.data.indices || []).map(item => ({
            indexCode: item.indexCode,
            indexName: item.indexName,
            indexType: item.indexType,
            operator: undefined,
            threshold: '',
            choose: false
          }))

          // 设置通知方式选项
          this.notificationMethods = response.data.noticeMethods || []
        }
      } catch (error) {
        console.error('获取规则条件数据失败:', error)
      }
    },
    // 获取通知对象数据
    async fetchNotificationTargets() {
      try {
        const response = await alarmNoticeConfigList()
        if (response.data) {
          this.notificationTargetOptions = response.data.map(item => ({
            label: item.noticeName,
            value: item.noticeCode
          }))
        }
      } catch (error) {
        console.error('获取通知对象数据失败:', error)
      }
    },
    // 节点类型变化处理
    handleNodeTypeChange(value) {
      // 根据选中的节点类型找到对应的节点列表
      const selectedNodeType = this.nodeTypeList.find(item => item.nodeType === value)
      this.nodeList = selectedNodeType ? selectedNodeType.nodeList || [] : []
      // 清空关联节点选择
      this.form.setFieldsValue({ nodeId: undefined })
    },

    // 下一步
    nextStep() {
      if (this.currentStep === 0) {
        this.form.validateFields(['ruleCode', 'ruleName', 'workflowCode'], (err) => {
          if (!err) {
            this.currentStep++
          }
        })
      } else if (this.currentStep === 1) {
        this.form.validateFields(['ruleCycle'], (err) => {
          if (!err) {
            // 验证至少选择一个指标
            const hasSelectedIndicator = this.warningIndicators.some(indicator => indicator.choose === true)
            if (!hasSelectedIndicator) {
              this.$message.error('请至少选择一个预警指标')
              return
            }
            this.currentStep++
          }
        })
      }
    },
    // 上一步
    prevStep() {
      this.currentStep--
    },

    // 添加通知配置项
    addNotificationConfig() {
      this.notificationConfigs.push({
        notificationTypes: [],
        notificationTargets: []
      })
    },
    // 删除通知配置项
    removeNotificationConfig(index) {
      this.notificationConfigs.splice(index, 1)
    },
    // 提交表单
    async submitForm() {
      this.form.validateFields(async (err, values) => {
        if (!err) {
          try {
            // 获取选中的决策流名称和节点信息
            const selectedWorkflow = this.workflowList.find(item => item.workflowCode === values.workflowCode)
            const selectedNodeType = this.nodeTypeList.find(item => item.nodeType === values.nodeType)
            const selectedNode = this.nodeList.find(item => item.nodeId === values.nodeId)

            // 处理预警指标数据，只包含choose为true的指标
            const quoteIndices = this.warningIndicators
              .filter(item => item.choose === true)
              .map(item => ({
                indexCode: item.indexCode,
                indexName: this.getIndexName(item.indexCode),
                operator: item.operator,
                threshold: Number(item.threshold),
                choose: item.choose
              }))

            // 处理通知配置数据
            const noticeUsers = this.notificationConfigs.map(config => {
              // 如果通知方式是多选，将type值累加
              const typeSum = config.notificationTypes.reduce((sum, type) => sum + type, 0)
              return {
                type: typeSum,
                noticeCodes: config.notificationTargets
              }
            })

            const params = {
              // 第一步数据
              ruleCode: values.ruleCode,
              ruleName: values.ruleName,
              workflowCode: values.workflowCode,
              workflowName: selectedWorkflow ? selectedWorkflow.workflowName : '',
              nodeType: values.nodeType,
              nodeTypeName: selectedNodeType ? selectedNodeType.nodeName : '',
              nodeId: values.nodeId,
              nodeName: selectedNode ? selectedNode.nodeName : '',

              // 第二步数据
              effectTimeStart: values.effectTimeStart || '',
              effectTimeEnd: values.effectTimeEnd || '',
              ruleCycle: values.ruleCycle,
              logicOperator: values.logicOperator || '',
              quoteIndices: JSON.stringify(quoteIndices),

              // 第三步数据
              noticeUsers: JSON.stringify(noticeUsers)
            }

            // 如果是编辑模式，添加ID参数
            if (this.pageType === '2' && this.ruleId) {
              params.id = this.ruleId
            }

            // 使用FormData格式提交数据
            const formData = new FormData()
            Object.keys(params).forEach((key) => {
              formData.append(key, params[key])
            })

            // 根据页面类型调用不同的接口
            let response
            if (this.pageType === '2' && this.ruleId) {
              // 编辑模式调用更新接口
              response = await alarmRuleUpdate(formData)
            } else {
              // 新增模式调用新增接口
              response = await alarmRuleAdd(formData)
            }

            if (response.statusCode === 200) {
              const successMsg = this.pageType === '2' ? '修改成功' : '提交成功'
              this.$message.success(successMsg)
              this.$router.push('/heimdallr/ruleConfig')
            } else {
              this.$message.error(response.message || '提交失败')
            }
          } catch (error) {
            console.error('提交失败:', error)
            this.$message.error('提交失败')
          }
        }
      })
    },
    // 获取指标名称
    getIndexName(indexCode) {
      const indicator = this.warningIndicators.find(item => item.indexCode === indexCode)
      return indicator ? indicator.indexName : ''
    },

    // 获取面包屑标题
    getBreadcrumbTitle() {
      if (this.pageType === '1' && !this.ruleId) {
        return '新增告警规则'
      } else if (this.pageType === '1' && this.ruleId) {
        return '复制告警规则'
      } else if (this.pageType === '2') {
        return '编辑告警规则'
      } else if (this.pageType === '3') {
        return '查看告警规则'
      }
      return '新增告警规则'
    },

    // 跳转到告警规则配置列表页面
    goToRuleList() {
      this.$router.push('/heimdallr/ruleConfig')
    }
  }
}
</script>

<style lang="less" scoped>
.rule-config-detail {
  padding: 0;
  background: #f5f5f5;
  min-height: calc(100vh - 64px);
}

.breadcrumb {
  padding: 16px 24px;
  background: #fff;
  margin-bottom: 0;
  border-bottom: 1px solid #e8e8e8;
}

.steps-wrapper {
  display: flex;
  background: transparent;
  padding: 0;
  margin-bottom: 24px;
  position: relative;
  height: 60px;

  .step-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
    background: #e5e5e5;
    color: #666;
    position: relative;
    height: 60px;
    clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 50%, calc(100% - 30px) 100%, 0 100%, 30px 50%);
    margin-right: -24px;
    z-index: 1;

    &:first-child {
      clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 50%, calc(100% - 30px) 100%, 0 100%);
      background: #1890ff;
      color: #fff;
    }

    &:last-child {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 30px 50%);
      margin-right: 0;
    }

    &.active {
      background: #1890ff;
      color: #fff;
      z-index: 3;
    }

    &.completed {
      background: #1890ff;
      color: #fff;
      z-index: 2;
    }

    .step-number {
      display: none;
    }

    .step-title {
      font-size: 14px;
      font-weight: 400;
      white-space: nowrap;
      text-align: center;
    }
  }
}

.step-content {
  background: #fff;
  margin: 0 24px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.step-form {
  padding: 40px;
}

.step-actions {
  margin-top: 40px;
  text-align: center;
  padding-bottom: 20px;

  .prev-btn {
    width: 120px;
    height: 40px;
    margin-right: 16px;
    border: 1px solid #d9d9d9;
    color: #666;

    &:hover {
      border-color: @primary-color;
      color: @primary-color;
    }
  }

  .next-btn,
  .submit-btn {
    width: 120px;
    height: 40px;
    border: none;

  }
}

.warning-indicators {
  margin-top: 24px;
}

.indicator-row {
  margin-bottom: 16px;
  padding: 20px;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  background: #fafafa;

  .indicator-label {
    font-weight: 600;
    color: #262626;
    font-size: 14px;
    line-height: 32px;
    display: inline-block;
  }

  .operator-select {
    width: 100%;
    min-width: 120px;
  }

  .threshold-input {
    width: 100%;
  }

  .switch-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
  }

  // 确保行内元素不会堆叠
  .ant-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;

    .ant-col {
      display: flex;
      align-items: center;
      min-height: 40px;
    }
  }
}

.notification-config {
  .config-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;

    h4 {
      margin: 0;
      font-weight: 600;
      font-size: 16px;
      color: #333;
    }

    .add-config-btn {
      border: none;
      border-radius: 6px;

    }
  }

  .empty-config {
    text-align: center;
    padding: 40px 0;
    background: #fafafa;
    border-radius: 6px;
    border: 1px dashed #d9d9d9;
  }

  .config-item {
    margin-bottom: 24px;
    padding: 20px;
    background: #fafafa;
    border: 1px solid #e8e8e8;
    border-radius: 6px;

    .config-item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;

      .config-title {
        font-weight: 600;
        font-size: 14px;
        color: #262626;
      }

      .remove-btn {
        color: #ff4d4f;

        &:hover {
          color: #ff7875;
        }
      }
    }

    .config-content {
      .config-row {
        display: flex;
        align-items: center;
        margin-bottom: 16px;

        &:last-child {
          margin-bottom: 0;
        }

        .config-label {
          width: 120px;
          font-weight: 600;
          color: #262626;
          font-size: 14px;
          flex-shrink: 0;
        }

        .notification-types {
          flex: 1;

          /deep/ .ant-checkbox-wrapper {
            margin-right: 16px;
          }
        }

        .notification-targets {
          flex: 1;
          min-width: 300px;

          /deep/ .ant-select-selection {
            min-height: 40px;
            border-radius: 6px;
          }
        }
      }
    }
  }
}

// 表单项样式优化
/deep/ .ant-form {
  .ant-form-item {
    margin-bottom: 24px;

    .ant-form-item-label {
      padding-bottom: 8px;

      label {
        font-weight: 600;
        color: #262626;
        font-size: 14px;
        line-height: 22px;

        &::after {
          display: none; // 隐藏冒号
        }
      }
    }

    .ant-form-item-control {
      line-height: 1.5715;
    }
  }

  .ant-row {
    margin-left: -12px;
    margin-right: -12px;

    .ant-col {
      padding-left: 12px;
      padding-right: 12px;
    }
  }
}

/deep/ .ant-input {
  height: 40px;
  border-radius: 6px;
  border: 1px solid #d9d9d9;
  font-size: 14px;
  padding: 8px 12px;
  transition: all 0.3s ease;

  &::placeholder {
    color: #bfbfbf;
    font-size: 14px;
  }

  &:hover {
    border-color: @primary-color;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
  }

  &:focus {
    border-color: @primary-color;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.15);
    outline: none;
  }
}

/deep/ .ant-select {
  min-width: 200px;

  .ant-select-selection {
    height: 40px;
    border-radius: 6px;
    border: 1px solid #d9d9d9;
    transition: all 0.3s ease;

    .ant-select-selection__rendered {
      line-height: 38px;

      .ant-select-selection__placeholder {
        color: #bfbfbf;
        font-size: 14px;
      }
    }

    .ant-select-arrow {
      color: #8c8c8c;
    }
  }

  &:hover .ant-select-selection {
    border-color: @primary-color;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
  }

  &.ant-select-focused .ant-select-selection {
    border-color: @primary-color;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.15);
  }
}

/deep/ .ant-checkbox-group {
  .ant-checkbox-wrapper {
    margin-right: 32px;
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.5715;

    .ant-checkbox {
      .ant-checkbox-inner {
        width: 18px;
        height: 18px;
        border-radius: 4px;
        border: 1px solid #d9d9d9;
        transition: all 0.3s ease;
      }

      &.ant-checkbox-checked .ant-checkbox-inner {
        background-color: @primary-color;
        border-color: @primary-color;

        &::after {
          width: 6px;
          height: 10px;
        }
      }
    }

    &:hover .ant-checkbox-inner {
      border-color: @primary-color;
    }
  }
}

/deep/ .ant-radio-group {
  .ant-radio-wrapper {
    margin-right: 32px;
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.5715;

    .ant-radio {
      .ant-radio-inner {
        width: 18px;
        height: 18px;
        border: 1px solid #d9d9d9;
        transition: all 0.3s ease;
      }

      &.ant-radio-checked .ant-radio-inner {
        border-color: @primary-color;

        &::after {
          width: 8px;
          height: 8px;
          background-color: @primary-color;
        }
      }
    }

    &:hover .ant-radio-inner {
      border-color: @primary-color;
    }
  }
}

/deep/ .ant-switch {
  background-color: #f0f0f0;
  border: 1px solid #d9d9d9;

  &.ant-switch-checked {
    background-color: @primary-color;
    border-color: @primary-color;
  }

  &:hover:not(.ant-switch-disabled) {
    background-color: #e6f7ff;
  }
}

// 表单布局优化
.step-form {
  .ant-form-item {
    &:last-child {
      margin-bottom: 0;
    }
  }

  // 紧凑表单样式
  .compact-form {
    .full-width-item {
      width: 100%;
      display: flex;
      margin-bottom: 12px;

      .ant-form-item-label {
        width: 100px;
        min-width: 100px;
        text-align: right;
        padding-right: 12px;
        flex-shrink: 0;
      }

      .ant-form-item-control {
        flex: 1;
        max-width: 400px;

        .ant-input,
        .ant-select {
          width: 100%;
          min-width: 300px;
        }
      }
    }

    // 时间条件内联样式
    .time-condition-inline {
      width: 100%;
      margin-bottom: 16px;

      .time-range-item {
        width: 100%;
        display: flex;

        .ant-form-item-label {
          width: 100px;
          min-width: 100px;
          text-align: right;
          padding-right: 12px;
          flex-shrink: 0;
        }

        .ant-form-item-control {
          flex: 1;
        }

        .time-range-wrapper {
          display: flex;
          align-items: center;
          gap: 8px;

          .time-select {
            width: 120px;
          }

          .time-separator-inline {
            font-size: 14px;
            color: #666;
            font-weight: 500;
            padding: 0 4px;
          }
        }
      }
    }

    // 预警指标表格样式
    .warning-indicators {
      margin-top: 20px;

      .indicators-header {
        margin-bottom: 12px;

        h4 {
          margin: 0;
          font-size: 14px;
          font-weight: 600;
          color: #333;
        }
      }

      .indicators-table {
        border: 1px solid #e8e8e8;
        border-radius: 4px;

        /deep/ .ant-table {
          font-size: 13px;

          .ant-table-thead>tr>th {
            background: #fafafa;
            font-weight: 600;
            color: #333;
            padding: 8px 12px;
            border-bottom: 1px solid #e8e8e8;
          }

          .ant-table-tbody>tr>td {
            padding: 8px 12px;
            border-bottom: 1px solid #f0f0f0;

            .ant-select,
            .ant-input {
              border-radius: 4px;
            }

            .ant-switch {
              min-width: 44px;
            }
          }

          .ant-table-tbody>tr:hover>td {
            background: #f5f5f5;
          }
        }
      }
    }
  }

  // 时间条件特殊布局
  .time-condition-row {
    align-items: flex-end;

    .time-separator {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 6px;

      .separator-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 32px;

        .separator-text {
          font-size: 14px;
          color: #666;
          font-weight: 500;
          line-height: 1;
        }
      }
    }
  }
}
</style>
